

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>



        <!-- Our CSS stylesheet file -->

        <link rel="stylesheet" href="css/styles.css" />



		<!-- Font Awesome Stylesheet -->

		<link rel="stylesheet" href="css/font-awesome.css" />





        <!--[if lt IE 9]>

          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

    </head>

    

    <body style="background-color: #06164A; height: 100%;">

  

    	<nav id="colorNav" >
			<h1 style="color: #fff;font-size: 30px;"><center>大数据融合与挖掘分析平台</center></h1>

			<ul style="margin-top: 30px;width: 700px;">



				<li class="blue"  style="position: relative;left: -100px;">

					<a href="/login" class="icon-twitter"></a>
					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">数据融合</h3>


				</li>

				<li class="yellow"  style="position: relative;left: -50px;">

					<a href="#" class="icon-beaker"></a>
					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">数据挖掘</h3>


				</li>

				<li class="purple"  style="position: relative;left: 0px;">

					<a href="#" class="icon-envelope"></a>

					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">深度学习</h3>
				</li>
				<li class="red2" style="position: relative;left: 50px;background-color: #f26206;color: #127a5d;">

					<a href="#" class="icon-table"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">数据采集</h3>


				</li>
				<li class="purple"  style="position: relative;left: 100px;">

					<a href="#" class="icon-envelope"></a>

					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">数据管理</h3>
				</li>

			</ul>
			<ul style="margin-top: 100px;width: 700px;">

				<li class="green1" style="position: relative;left: -100px;background-color: #e94e33;color: #127a5d;">

					<a href="#" class="icon-home"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 45px; margin-top: 5px;">分类</h3>

				</li>

				<li class="red2" style="position: relative;left: -50px;background-color: #a533e9;color: #127a5d;">

					<a href="#" class="icon-table"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 45px; margin-top: 5px;">聚类</h3>


				</li>

				<li class="blue2"  style="position: relative;left: 0px;background-color: #d8e253;color: #127a5d;">

					<a href="#" class="icon-twitter"></a>
					<h3 style="position: absolute; color: #fff; margin-left: 45px; margin-top: 5px;">降维</h3>


				</li>

				<li class="yellow1"  style="position: relative;left: 50px;background-color: #ec10c4;color: #127a5d;">

					<a href="#" class="icon-beaker"></a>
					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">特征选择</h3>


				</li>

				<li class="purple1"  style="position: relative;left: 100px;background-color: #0bc4cf;color: #127a5d;">

					<a href="#" class="icon-envelope"></a>

					<h3 style="position: absolute; color: #fff; margin-left: 45px; margin-top: 5px;">回归</h3>
				</li>

			</ul>
			<ul style="margin-top: 100px;width: 700px;">

				<li class="green1" style="position: relative;left: -100px;background-color: #17be37;color: #127a5d;">

					<a href="#" class="icon-home"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">知识图谱</h3>

				</li>


				<li class="red2" style="position: relative;left: -50px;background-color: #ec1f07;color: #127a5d;">

					<a href="#" class="icon-table"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">智能优化</h3>


				</li>
				<li class="red2" style="position: relative;left: 0px;background-color: #8413d1;color: #127a5d;">

					<a href="#" class="icon-table"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">用户管理</h3>


				</li>
				<li class="" style="position: relative;left: 50px;background-color: #00c08b;color: #127a5d;" id="apps">

					<a href="#" class="icon-home"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;">应用商店</h3>

				</li>

				<li class="red" style="position: relative;left: 100px;background-color: aliceblue;color: #2c2829;">

					<a href="#" class="icon-plus"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;"></h3>


				</li>

			</ul>

		</nav>
		<nav id="colorNav1" style="display:none;" >
			<h1 style="color: #fff;font-size: 30px;"><center>大数据融合与挖掘分析平台</center></h1>

			<ul style="margin-top: 30px;width: 700px;">



				<li class="blue"  style="position: relative;left: -100px;">

					<a href="/login" class="icon-twitter"></a>
					<h3 style="position: absolute; color: #fff; margin-left: 35px; margin-top: 5px;">平台</h3>


				</li>

				<li class="yellow"  style="position: relative;left: -50px;">

					<a href="/page/AHCRBF" class="icon-beaker"></a>
					<h3 style="position: absolute; color: #fff; margin-left: 45px; margin-top: 5px;">算法</h3>

				</li>
				<li class="red" style="position: relative;left: 0px;background-color: aliceblue;color: #2c2829;">

					<a href="#" class="icon-plus"></a>


					<h3 style="position: absolute; color: #fff; margin-left: 25px; margin-top: 5px;"></h3>


				</li>
			</ul>

		</nav>



		<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
		<script>
		$('.green').on('click',function(){
        	window.location.href="/login";
		});
		$('.red').on('click',function(){
        	window.location.href="/page/AHCRBF";
		});
		$('.blue').on('click',function(){
        	window.location.href="/page/PCA";
		});
		$('.yellow').on('click',function(){
        	window.location.href="/page/KNN";
		});
		$('.purple').on('click',function(){
        	window.location.href="/page/KNN";
		});
		$('#apps').on('click',function(){
			var ui = document.getElementById("colorNav");
    		ui.style.display="none";
    		var ui1 = document.getElementById("colorNav1");
    		ui1.style.display="";

		});




		</script>

    </body>

</html>

